<script setup>
import { useRouter } from "vue-router";
const router = useRouter();

const formdata2 = [
    {
        icon: "user",
        color: "text-light-blue-500",
        title: "用户",
        path: "/user/list"
    },
    {
        icon: "shopping-cart",
        color: "text-violet-500",
        title: "商品",
        path: "/goods/list"
    },
    {
        icon: "tickets",
        color: "text-fuchsia-500",
        title: "订单",
        path: "/order/list"
    },
    {
        icon: "chat-dot-square",
        color: "text-teal-500",
        title: "评价",
        path: "/comment/list"
    },
    {
        icon: "picture",
        color: "text-rose-500",
        title: "图库",
        path: "/image/list"
    },
    {
        icon: "bell",
        color: "text-green-500",
        title: "公告",
        path: "/notice/list"
    },
    {
        icon: "set-up",
        color: "text-grey-500",
        title: "配置",
        path: "/setting/base"
    },
    {
        icon: "files",
        color: "text-yellow-500",
        title: "优惠券",
        path: "/coupon/list"
    }
]
const goroute = (item) => {
    router.push(item);
}
</script>


<template>
    <el-row :gutter="20" class=" mt-5 ">
        <el-col :span="3" v-for="item in formdata2" :key="item.title">
            <el-card shadow="hover" :body-style="{ padding: '15px' }" @click="goroute(item.path)">
                <div class="flex flex-col items-center justify-center cursor-pointer">
                    <el-icon :class="item.color">
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>
                        {{ item.title }}
                    </span>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>
<style scoped>
.tow-row {
    height: 50px;;
    flex-wrap: wrap;
}
</style>